<template>
    <div>
        <el-page-header @back="goBack" content="新增申报类项目" style="padding: 8px 0 24px 0;">
        </el-page-header>
        <el-row :gutter="15">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="135px">
                <el-col :span="24">
                    <el-form-item label="项目名称" prop="proName">
                        <el-input v-model="formData.proName" placeholder="请输入项目名称" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="负责人" prop="proForName">
                        <el-input v-model="formData.proForName" placeholder="请输入负责人" clearable
                            :style="{ width: '100%' }" :disabled="viewType == 'read'">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="负责人联系方式" prop="proForPhone">
                        <el-input v-model="formData.proForPhone" placeholder="请输入负责人联系方式" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="申报类型" prop="type">
                        <el-select v-model="formData.type" placeholder="请选择申报类型" clearable :style="{ width: '100%' }"
                            :disabled="viewType == 'read'">
                            <el-option v-for="dict in dict.type.declare_type" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目状态" prop="proState">
                        <el-select v-model="formData.proState" placeholder="请选择项目状态" clearable
                            :style="{ width: '100%' }" :disabled="viewType == 'read'">
                            <el-option v-for="dict in dict.type.project_state" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="开始时间" prop="reportTime">
                        <el-date-picker v-model="formData.reportTime" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss" :disabled="viewType == 'read'" :style="{ width: '100%' }"
                            placeholder="请选择项目开始时间" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="资金奖补" prop="moneyPrize">
                        <el-input v-model="formData.moneyPrize" placeholder="请输入资金奖补" clearable
                            :style="{ width: '100%' }" :disabled="viewType == 'read'">
                            <template slot="append">万</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="资料编写人" prop="detailAuthor">
                        <el-input v-model="formData.detailAuthor" placeholder="请输入资料编写人" clearable
                            :style="{ width: '100%' }" :disabled="viewType == 'read'">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12"><el-form-item label="none" style="visibility: hidden;"></el-form-item></el-col>
                <div v-for="(item, index) in formData.proReportMoneys" :key="index" style="width: 100%;">
                    <el-col :span="7">
                        <el-form-item label="收款时间" :prop="'proReportMoneys.' + index + '.payInTime'"
                            :rules="[{ required: true, message: '请选择收款日期', trigger: 'change' }]">
                            <el-date-picker v-model="item.payInTime" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss" :disabled="viewType == 'read'"
                                :style="{ width: '100%' }" placeholder="请选择收款时间" clearable></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="已收金额" :prop="'proReportMoneys.' + index + '.alreadyInMoney'"
                            :rules="[{ required: true, message: '请输入已收金额', trigger: 'blur' }]">
                            <el-input v-model="item.alreadyInMoney" placeholder="请输入已收金额" clearable
                                :style="{ width: '100%' }" :disabled="viewType == 'read'">
                                <template slot="append">万</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="剩余金额" :prop="'proReportMoneys.' + index + '.notInMoney'"
                            :rules="[{ required: true, message: '请输入剩余金额', trigger: 'blur' }]">
                            <el-input v-model="item.notInMoney" placeholder="请输入剩余金额" clearable
                                :style="{ width: '100%' }" :disabled="viewType == 'read'">
                                <template slot="append">万</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label-width="20">
                            <el-button size="mini" icon="el-icon-minus" circle @click="remove(index)" v-if="index != 0"></el-button>
                            <el-button v-if="index == formData.proReportMoneys.length - 1" size="mini"
                                icon="el-icon-plus" circle @click="handleAdd"></el-button>
                        </el-form-item>
                    </el-col>
                </div>
                <el-col :span="24">
                    <el-form-item label="项目说明" prop="proShow">
                        <el-input v-model="formData.proShow" type="textarea" placeholder="请输入项目说明" maxlength="500"
                            :disabled="viewType == 'read'" :autosize="{ minRows: 4, maxRows: 4 }"
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="info-title"><el-divider>项目方信息</el-divider></el-col>
                <el-col :span="12">
                    <el-form-item label="项目主管单位" prop="chargeDept">
                        <el-input v-model="formData.chargeDept" placeholder="请输入项目主管单位" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="主管单位负责科室" prop="chargeForDept">
                        <el-input v-model="formData.chargeForDept" placeholder="请输入主管单位负责科室" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="科室联系方式" prop="forDeptPhone">
                        <el-input v-model="formData.forDeptPhone" placeholder="请输入科室联系方式" clearable
                            :disabled="viewType == 'read'" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="申报书附件" prop="reportBookAnnex">
                        <fileUpload @input="getReportBookList" :disabled="viewType == 'read'"
                            :value="formData.reportBookAnnex" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="管理方法/政策" prop="manageMethod">
                        <fileUpload @input="getManageMethodList" :disabled="viewType == 'read'"
                            :value="formData.manageMethod" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark" :disabled="viewType == 'read'">
                        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" maxlength="500"
                            :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item size="large">
                        <el-button type="primary" @click="submitForm">提交</el-button>
                        <el-button @click="resetForm">返回</el-button>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
    </div>
</template>
<script>
import { addDeclareProject, updateDeclareProject } from "@/api/project/index";
export default {
    dicts: ['declare_type', 'project_state'],
    components: {},
    props: {
        viewType: {
            type: String,
            default: ''
        },
        form: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            formData: {
                proReportMoneys: [
                    {
                        payInTime: null,
                        alreadyInMoney: undefined,
                        notInMoney: undefined
                    }
                ],
                reportTime: null,
                proName: undefined,
                proForName: undefined,
                proForPhone: undefined,
                type: undefined,
                proState: undefined,
                moneyPrize: undefined,
                detailAuthor: undefined,
                proShow: undefined,
                chargeDept: undefined,
                chargeForDept: undefined,
                forDeptPhone: undefined,
                reportBookAnnex: undefined,
                manageMethod: undefined,
                remark: undefined,
            },
            rules: {
                reportTime: [{
                    required: true,
                    message: '请选择项目开始时间',
                    trigger: 'change'
                }],
                proName: [{
                    required: true,
                    message: '请输入项目名称',
                    trigger: 'blur'
                }],
                proForName: [{
                    required: true,
                    message: '请输入负责人',
                    trigger: 'blur'
                }],
                proForPhone: [{
                    required: true,
                    message: '请输入负责人联系方式',
                    trigger: 'blur'
                }, {
                    pattern: /^1[3456789]\d{9}$/,
                    message: "请输入正确的手机号",
                    trigger: "blur",
                }],
                type: [{
                    required: true,
                    message: '请选择申报类型',
                    trigger: 'change'
                }],
                proState: [{
                    required: true,
                    message: '请选择项目状态',
                    trigger: 'change'
                }],
                moneyPrize: [{
                    required: true,
                    message: '请输入资金奖补',
                    trigger: 'blur'
                }],
                detailAuthor: [],
                proShow: [{
                    required: true,
                    message: '请输入项目说明',
                    trigger: 'blur'
                }],
                chargeDept: [],
                chargeForDept: [],
                forDeptPhone: [],
                remark: [],
            },
            field115Action: '/dev-api/system/oss/upload',
            field115fileList: [],
            field116Action: '/dev-api/system/oss/upload',
            field116fileList: []
        }
    },
    computed: {},
    watch: {
        form: {
            handler(val) {
                this.formData = val;
            },
            deep: true
        }
    },
    created() { },
    mounted() { },
    methods: {
        handleAdd() {
            this.formData.proReportMoneys.push({ payInTime: "", alreadyInMoney: "", notInMoney: "" });
        },
        remove(index) {
            if (this.formData.proReportMoneys.length >= 1) {
                this.formData.proReportMoneys.splice(index, 1);
            } else {
                this.formData.proReportMoneys[0] = { payInTime: "", alreadyInMoney: "", notInMoney: "" };
            }
        },
        getReportBookList(file) {
            this.formData.reportBookAnnex = file;
        },
        getManageMethodList(file) {
            this.formData.manageMethod = file;
        },
        goBack() {
            this.$router.go(-1);
        },
        submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (valid) {
                    if (this.formData.id != undefined) {
                        updateDeclareProject({ ...this.formData }).then(response => {
                            if(response.code == 200) {
                                this.$modal.msgSuccess("修改成功");
                                this.$router.push({
                                    path: '/project/projectList'
                                });
                            }
                        });
                    } else {
                        addDeclareProject({ ...this.formData }).then(response => {
                            if(response.code == 200) {
                                this.$modal.msgSuccess("新增成功");
                                this.$router.push({
                                    path: '/project/projectList'
                                });
                            }
                        });
                    }
                }
            })
        },
        resetForm() {
            this.$router.push({
                path: '/project/projectList'
            })
        },
        field115BeforeUpload(file) {
            let isRightSize = file.size / 1024 / 1024 < 2
            if (!isRightSize) {
                this.$message.error('文件大小超过 2MB')
            }
            return isRightSize
        },
        field116BeforeUpload(file) {
            let isRightSize = file.size / 1024 / 1024 < 2
            if (!isRightSize) {
                this.$message.error('文件大小超过 2MB')
            }
            return isRightSize
        },
    }
}

</script>
<style>
.el-upload__tip {
    line-height: 1.2;
}
</style>